<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="head::common_header">


</head>
<style>

    /*用户评价样式*/
    ul#user_evaluate li{
        border-top: 2px dashed #eee;
        padding: 30px 0;
        list-style:none
    }
    li.evaluate_li span{
        display: inline-block;
        vertical-align: top;
    }
    li.evaluate_li span.img img{
        width: 50px;
        height:50px;
        border-radius: 50%;
        margin-right:30px
    }
    li.evaluate_li span.info{
        width: 675px;
        display: inline-block;
        vertical-align: top;
    }
    li.evaluate_li span.info h4{
        font-size: 12px;
        color: #999;
    }
    li.evaluate_li span.info p.time{
        font-size: 12px;
        color: #999;
    }
    li.evaluate_li span.info div.reply_info{
        margin-top: 15px;
        padding: 15px;
        background: #f8f8f8;
        font-size: 12px;
        color: #999;
    }
    /*分页点击操作*/
    div.switch-tag-wrap {
        text-align:right;
    }
    div.js-switch{
        color: #999;
        display: inline-block;
        font-size: 14px;
        width: 60px;
        text-align: center;
        cursor: pointer;
        margin-right: 20px;
    }
    div.js-switch:hover{
        color:#ffa500;
    }
    div.switch-tag-wrap div.fr{
        float:right;
    }
    /*评价选择*/
    p.switch-head-line span.mr{
        cursor: pointer;
        margin-right: 60px;
    }
    .chooseActive{
        color: #ffa500;
    }
</style>
<body>
<div th:replace="header :: header"></div>

<!-- 联系我们 -->
<section class="contact" id="contact">

    <h1 class="heading">
<!--        evaluate.html-->
        <span>e</span>
        <span>v</span>
        <span>a</span>
        <span>l</span>
        <span>a</span>
        <span>t</span>
        <span>e</span>
    </h1>

    <div class="row">
        <div class="image" style="height: 550px">
            <img src="/img/Hippopx.jpg" alt="">
        </div>

        <div  id="evalute-right" style="height: 500px">
            <!-- 评价选择 -->
            <p class="switch-head-line">
                <label style="width: 80px;color: #999;">sort：</label>
                <span class="mr chooseActive" eval_data='1' onclick="chooseEval(this)">Good(6)</span>
                <span class="mr" eval_data='2' onclick="chooseEval(this)">Average(0)</span>
                <span class="mr" eval_data='3' onclick="chooseEval(this)">Poor(1)</span>
            </p>
            <!-- 评价选择 -->

            <ul id="user_evaluate">
                <li class="evaluate_li">
					 <span class="img">
						<img src="/img/acvator.jpg" alt="头像" />
					</span>
                    <span class="info">
						<h4>xxx</h4>
						<p>It's beautiful here.</p>
						<p class="time">2019-04-28</p>
						<div class="reply_info"> Reply：ye. </div>
					</span>
                </li>
            </ul>

            <!-- 分页-START -->
            <div class="switch-tag-wrap " >
                <!--<div class="js-switch next  fr" data-external="2" onclick="trunPage(this)">下一页</div>
                <div class="js-switch prev fr" data-external="1" onclick="trunPage(this)">上一页</div>
                <div class="js-switch first-page fr" data-external="1" onclick="trunPage(this)">首页</div> -->
            </div>
            <!-- 分页-END -->
        </div>

    </div>

</section>

<!-- 品牌赞助 -->


<!-- 底部 -->

<div th:replace="footer :: footer"></div>

<script>

    //翻页操作
    function trunPage(obj){
        var page = $(obj).attr('data-external');
        var type = $('p.switch-head-line').find('span.chooseActive').attr('eval_data');	//获取评价类型
        getEvalHtml(page, type);	//元素追加
    }

    //选择操作
    function chooseEval(obj){
        // 点击高亮
        $(obj).parent().find('span.chooseActive').removeClass('chooseActive');
        $(obj).addClass('chooseActive');

        // 点击评价时内容切换
        getEvalHtml(1, $(obj).attr('eval_data'));
    }

    //为了模拟效果，直接写一些固定数据。
    function getEvalHtml(page, type){
        $('ul#user_evaluate').empty();	//元素清空
        $('div.switch-tag-wrap').empty();
        $('span#tempNotEva').empty();

        //处理评论 START
        var data = getDataByParam(page, type);
        var dataList = data.list;
        if(dataList!=''){	//数据拼接
            var liHtml = '';
            $.each(dataList, function(key, val){
                liHtml +='<li class="evaluate_li">'+
                    '<span class="img">'+
                    '<img src="' + val['photo'] + '" alt="" />'+
                    '</span>'+
                    '<span class="info">'+
                    '<h4>' + val['name'] + '</h4>'+
                    '<p>' + val['content'] + '</p>'+
                    '<p class="time">' + val['createTime'] + '</p>';
                if(val['reply']){
                    liHtml += '<div class="reply_info"> reply：' + val['reply'] + ' </div>';
                }
                liHtml += '</span></li>';
            });
            //console.log(liHtml);
            $('ul#user_evaluate').append(liHtml);	//评论数据追加
            //处理评论END

            //处理分页 START
            var pageHtml = '';
            if(data['totalPage']>1){
                if(data['page']!=data['totalPage']){//当前页不是最后一页?>
                    pageHtml +='<div class="js-switch next  fr" data-external="'+ (data['page']*1+1) +'" onclick="trunPage(this)">下一页</div>';
                }
                if(data['page']!=1){//当前页不是第一页?>
                    pageHtml +='<div class="js-switch prev fr" data-external="'+ (data['page']*1-1) +'" onclick="trunPage(this)">上一页</div>';
                }
                if(data['totalPage']!=1 && data['page']!=1){//总页数不是1页，并且当前页不是第一页?>
                    pageHtml +='<div class="js-switch first-page fr" data-external="1" onclick="trunPage(this)">首页</div>';
                }
                // $('div.switch-tag-wrap').append(pageHtml);	//页数追加
            }
            //处理分页END
        }else{
            $('ul#user_evaluate').text('No evaluation！！！');
        }
    }

    //根据页数，类型获取模拟数据
    function getDataByParam(page, type){
        var str = '';
        var photo = '/img/acvator.jpg';
        if(type==1){
            str = 	'{"page":"'+page+'",'+
                '"totalPage":3,'+
                '"list":['+
                '{"content":"hello","createTime":"2019-04-27 11:52","name":"go go !","photo":"'+photo+'","reply":""},'+
                '{"content":"is good","createTime":"2019-04-28 11:53","name":"lrfc","photo":"'+photo+'","reply":"thank"}'+
                ']}';
        }else if(type==2){
            str = 	'{"page":"'+page+'",'+
                '"totalPage":0,'+
                '"list":[]}';
        }else if(type==3){
            str = 	'{"page":"'+page+'",'+
                '"totalPage":1,'+
                '"list":['+
                '{"content":"The pen refill has faded","createTime":"2019-04-27 11:52","name":"Let\'s go","photo":"'+photo+'","reply":""}'+
                ']}';
        }
        return  JSON.parse(str);
    }
</script>




</body>
</html>
